<template>
  <!-- 用户管理页面 -->
  <div class="user-content">
    <div class="input">
      <!-- 搜索框 -->
      <input
        type="text"
        v-model="keyword"
        placeholder="根据昵称、手机号或邮箱搜索账号"
        @keyup.enter="user_search"
      />
      <!-- 搜索按钮 -->
      <button class="search" @click="user_search">搜 索</button>
    </div>
    <!-- 还没开始搜索时的空状态 -->
    <el-empty description="还没开始搜素哦~" v-if="show"></el-empty>
    <!-- 没有搜索结果时显示的空状态 -->
    <el-empty description="没有该用户信息~" v-if="showNot"></el-empty>
    <!-- 搜索结果 -->
    <ul v-if="display" id="userscroll">
      <li v-for="(item, index) in user" :key="index">
        <!-- 头像 -->
        <img v-if="item.picture" :src="`http://` + item.picture" alt="" />
        <img v-else src="../../assets/头像.jpg" alt="" />
        <!-- 中间内容区域 -->
        <div class="user-center">
          <!-- 昵称 -->
          <h2>{{ item.username }}</h2>
          <!-- 原创 阅读 点赞 -->
          <p>
            原创{{ item.originalCount }} &nbsp;&nbsp;&nbsp;阅读
            {{ item.likeCount }} &nbsp;&nbsp;&nbsp; 点赞{{ item.viewCount }}
          </p>
          <!-- 简介 -->
          <p>{{ item.biography }}</p>
        </div>
        <div class="button">
          <!-- 激活按钮 -->
          <button
            @click="activate(item)"
            :disabled="item.dis_activate"
            :class="item.classname_a"
          >
            激活
          </button>
          <!-- 禁用按钮 -->
          <button
            @click="disable(item)"
            :disabled="item.dis"
            :class="item.classname_d"
          >
            禁用
          </button>
        </div>
      </li>
    </ul>
    <!-- 页码 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalNumber * 10"
      @current-change="currentPage"
      :current-page="page"
      v-if="display"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "UserManagement",
  data() {
    return {
      show: true, //还没开始搜索时的空状态
      showNot: false, //没有搜索结果时显示的空状态
      display: false, //搜索结果显示与隐藏
      keyword: "", //搜索框的关键字
      page: 1, //页码（默认为1）
      totalNumber: 1, //总页数，默认1页
      user: [], //搜索用户列表
    };
  },
  methods: {
    // 用户管理-搜索
    user_search() {
      // 当搜索框不为空时
      if (this.keyword.trim()) {
        // 隐藏空状态，显示用户列表
        this.show = false;
        this.display = true;
        this.showNot = false;
        this.$http({
          method: "post",
          url: "admin/searchUserByKeyWords",
          params: {
            pageNum: this.page, //当前页码，默认为第一页
            pageSize: 6, // 当前每页显示条数，我这里给6
            keywords: this.keyword.trim(), //当前查询关键字去掉两边空格
          },
        }).then(({ data }) => {
          this.user = []; //渲染页面之前清空user
          if (data.flag) {
            this.user = data.data.pageInfo.list; //当前页用户信息
            this.totalNumber = data.data.pageInfo.pages; //总页数
            // 循环追加属性到user对象
            for (let i = 0; i < this.user.length; i++) {
              // 追加总原创量，总阅读量，总点赞量到user里面
              this.$set(
                this.user[i],
                "originalCount",
                data.data.userMap[this.user[i].uid].originalCount
              );
              this.$set(
                this.user[i],
                "likeCount",
                data.data.userMap[this.user[i].uid].likeCount
              );
              this.$set(
                this.user[i],
                "viewCount",
                data.data.userMap[this.user[i].uid].viewCount
              );
              // 判断当前账号的状态  渲染激活禁用按钮
              if (this.user[i].logout) {
                // 当前状态为true账号为激活状态
                this.$set(this.user[i], "dis", false); //禁用按钮可用
                this.$set(this.user[i], "dis_activate", true); //激活按钮禁用
                this.$set(this.user[i], "classname_a", "gray"); //激活按钮灰底
                this.$set(this.user[i], "classname_d", ""); //禁用按钮去掉灰底
              } else {
                // 当前状态为false账号为禁用状态
                this.$set(this.user[i], "dis_activate", false); //激活按钮可用
                this.$set(this.user[i], "dis", true); //禁用按钮禁用
                this.$set(this.user[i], "classname_a", ""); //激活按钮去掉灰底
                this.$set(this.user[i], "classname_d", "gray"); //禁用按钮灰底
              }
            }
          } else {
            // 没有查询到用户信息时显示空状态
            this.show = false;
            this.display = false;
            this.showNot = true;
            this.$message.warning("没有搜到用户信息");
          }
        });
      } else {
        this.$message.warning("搜索关键词不能为空");
      }
    },
    // 激活禁用请求
    submit(value) {
      this.$http({
        method: "post",
        url: "admin/editLogout",
        params: {
          uid: value.uid, //当前中号的id
          logout: value.logout, //当前账号改变之前的状态
        },
      }).then(({ data }) => {
        if (data.flag) {
          this.user_search(); //更新用户信息
        }
      });
    },
    // 用户管理-激活按钮
    activate(value) {
      this.submit(value); //发送激活请求
      this.$message.success("激活成功");
    },
    // 用户管理-禁用按钮
    disable(value) {
      this.submit(value); //发送禁用请求
      this.$message.success("禁用成功");
    },
    // 用户管理-切换后页码
    currentPage(val) {
      this.page = val;
      this.user_search(); //更新用户信息
    },
  },
};
</script>

<style scoped>
/* 按钮禁用背景颜色 */
.gray {
  background-color: rgb(179, 177, 177) !important;
  cursor: not-allowed;
}

/* 用户管理,角色管理 */
.user-content {
  position: relative;
}
.user-content .input {
  height: 44px;
}
/* 搜索栏 */
.user-content input {
  height: 40px;
  width: 350px;
  outline: none;
  border: 2px solid #f28731;
  border-radius: 20px;
  padding: 0 40px 0 20px;
  font-size: 18px;
  position: absolute;
  left: 50%;
  transform: translate(-65%);
}
/* 搜索按钮 */
.user-content .search {
  outline: none;
  height: 44px;
  width: 110px;
  border: 0;
  background-color: #f28731;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  position: absolute;
  left: 50%;
  transform: translate(116%);
  font-size: 20px;
  cursor: pointer;
  color: #fff;
}
.user-content .search::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e858";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 8px;
  font-size: 20px;
}
/* 搜索结果 */
.user-content ul {
  margin-top: 30px;
  /* padding-bottom: 50px; */
  width: 80%;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
.user-content ul li {
  padding: 5px 30px;
  display: flex;
  position: relative;
  border-bottom: 1px solid rgb(237, 236, 236);
  box-shadow: 0 0 50px 0 rgb(233, 234, 234);
}
/* 头像 */
.user-content ul li img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  margin-right: 20px;
}
/* 中间内容区域 */
.user-center {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
/* 昵称 */
.user-content ul li h2 {
  color: #f28731;
}
/* 原创阅读点赞简介 */
.user-content ul li p {
  font-size: 12px;
  color: #7b7a7a;
}
/* 禁用按钮 */
.user-content ul li .button {
  position: absolute;
  right: 20px;
  top: 20px;
}
/* 激活禁用按钮 */
.user-content ul li button {
  margin-right: 10px;
  width: 70px;
  height: 35px;
  border-radius: 40px;
  border: 0;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background-color: #f28731;
  cursor: pointer;
}
/* 分页位置 */
.el-pagination {
  position: absolute;
  bottom: -530px;
  left: 50%;
  transform: translate(-50%);
  z-index: 999;
}
/* 页码设置样式 */
.user-content /deep/ .el-pagination.is-background .el-pager li,
.user-content /deep/ .el-pagination.is-background .btn-prev,
.user-content /deep/ .el-pagination.is-background .btn-next {
  width: 30px;
  height: 30px;
  /* text-align: center; */
  line-height: 30px;
  font-size: 16px;
}
.user-content /deep/ .el-pagination .btn-next .el-icon,
.user-content /deep/ .el-pagination .btn-prev .el-icon {
  font-size: 18px;
}
.user-content
  /deep/
  .el-pagination.is-background
  .el-pager
  li:not(.disabled).active {
  background-color: #f28731;
}
.user-content
  /deep/
  .el-pagination.is-background
  .el-pager
  li:not(.disabled):hover {
  color: #f28731;
}
</style>